<template>
  <div class="login-container"
       ref="login"
       @keyup.enter.native="handleLogin">
    <!--<img class="log" src="/img/bg/login_log.png">-->
    <div class="login-weaper animated bounceInDown" v-if="!params.authCode">
      <!--<div class="login-left">-->
      <!--<img src="/img/bg/login_pic.png"/>-->
      <!--</div>-->
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">
            {{ $t('login.title') }}{{website.title}}
            <!--            <top-lang></top-lang>-->
          </h4>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <!--<thirdLogin v-else-if="activeName==='third'"></thirdLogin>-->
          <!--<div class="login-menu">-->
            <!--<a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
            <!--<a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <!--<div class="copyright">版权所有 国任保险Copyright &copy; ICP许可证号:京ICP备18009302号</div>-->
  </div>
</template>
<script>
    import userLogin from "./userlogin.vue";
    import codeLogin from "./codelogin.vue";
    import thirdLogin from "./thirdlogin.vue";
    import {mapGetters} from "vuex";
    import {validatenull} from "@/utils/validate";
    import topLang from "@/page/index/top/top-lang.vue";
    import website from '@/config/website';
    import {getQueryString, getTopUrl} from "@/utils/util";

    export default {
        name: "login",
        components: {
            userLogin,
            codeLogin,
            thirdLogin,
            topLang
        },
        data() {
            return {
                website: website,
                time: "",
                activeName: "user",
                socialForm: {
                    tenantId: "000000",
                    source: "",
                    code: "",
                    state: "",
                },
                params: {
                    authCode: ""
                },
            };
        },
        watch: {
            $route() {
                this.handleLogin();
            }
        },
        created() {
            this.handleLogin();
            this.getTime();
        },
        mounted() {
            this.codeLogin();
        },
        computed: {
            ...mapGetters(["website", "tagWel", "userInfo"])
        },
        props: [],
        methods: {
            codeLogin() {
                // 获取URL携带的参数
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    this.params[pair[0]] = pair[1] || "";
                }
                if (vars && vars.length > 0) {
                    window.history.replaceState("", "", window.location.href.replace(window.location.search, ""));
                }
                if (this.params.authcode) {
                    this.params.authCode = this.params.authcode;
                }
                if (this.params.clear !== undefined) {
                    this.$store.commit('SET_USER_INFO', {});
                }
                if (this.params.authCode) {
                    this.$store.commit('SET_USER_INFO', {});
                    const loading = this.$loading({
                        lock: true,
                        text: '登录中,请稍后。。。',
                        spinner: "el-icon-loading"
                    });
                    this.$store.dispatch("VerifyAuth", this.params).then(() => {
                        loading.close();
                        this.$store.commit('SET_USER_INFO', this.userInfo);
                        this.$router.push({path: this.tagWel.value});
                    }).catch(() => {
                        this.$store.commit('SET_USER_INFO', {
                            authCode: this.params.authCode
                        });
                        loading.close();
                    });
                } else {
                    // this.params.authCode = this.userInfo.authCode;
                    // if (this.params.authCode) {
                    //   this.$alert("请求未授权，请重新进入！", '提示', {
                    //     type: "warning",
                    //     center: true,
                    //     showClose: false,
                    //     showConfirmButton: false
                    //   })
                    // } else {
                    //   this.$store.commit('SET_USER_INFO', {});
                    // }
                }
            },
            getTime() {
                setInterval(() => {
                    this.time = this.$dayjs().format('YYYY-MM-DD HH:mm:ss');
                }, 1000);
            },
            handleLogin() {
                const topUrl = getTopUrl();
                const redirectUrl = '/oauth/redirect/';
                const ssoCode = '?code=';
                this.socialForm.source = getQueryString('source');
                this.socialForm.code = getQueryString('code');
                this.socialForm.state = getQueryString('state');
                if (validatenull(this.socialForm.source) && topUrl.includes(redirectUrl)) {
                    let source = topUrl.split('?')[0];
                    source = source.split(redirectUrl)[1];
                    this.socialForm.source = source;
                }
                if (
                    topUrl.includes(redirectUrl) &&
                    !validatenull(this.socialForm.source) &&
                    !validatenull(this.socialForm.code) &&
                    !validatenull(this.socialForm.state)
                ) {
                    const loading = this.$loading({
                        lock: true,
                        text: '第三方系统登录中,请稍后',
                        background: 'rgba(0, 0, 0, 0.7)',
                    });
                    this.$store
                        .dispatch('LoginBySocial', this.socialForm)
                        .then(() => {
                            window.location.href = topUrl.split(redirectUrl)[0];
                            this.$router.push(this.tagWel);
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                } else if (
                    !topUrl.includes(redirectUrl) &&
                    !validatenull(this.socialForm.code) &&
                    !validatenull(this.socialForm.state)
                ) {
                    const loading = this.$loading({
                        lock: true,
                        text: '单点系统登录中,请稍后',
                        background: 'rgba(0, 0, 0, 0.7)',
                    });
                    this.$store
                        .dispatch('LoginBySso', this.socialForm)
                        .then(() => {
                            window.location.href = topUrl.split(ssoCode)[0];
                            this.$router.push(this.tagWel);
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                }
            }
        }
    };
</script>

<style lang="scss">
  @import "@/styles/login.scss";
</style>
